<template>
  <div>
    <ClientOnly>
      <slot name="before" />
      <span ref="countUp"></span>
    </ClientOnly>
  </div>
</template>

<script>
export default {
  name: "CountUp",
  props: {
    startVal: {
      type: Number,
      default: 0,
    },
    endVal: {
      type: Number,
      required: true,
    },
    decimalPlaces: {
      type: Number,
      default: 0,
    },
    duration: {
      type: Number,
      default: 2,
    },
    delay: {
      type: Number,
      default: 500,
    },
  },
  mounted() {
    this.init();
  },
  data() {
    return {
      counter: null,
    };
  },
  methods: {
    init() {
      import("countup.js").then((module) => {
        this.$nextTick(() => {
          this.counter = new module.CountUp(this.$refs.countUp, this.endVal, {
            startVal: this.startVal,
            decimalPlaces: this.decimalPlaces,
            duration: this.duration,
          });
          setTimeout(() => {
            this.counter.start();
          }, this.delay);
        });
      });
    },
  },
  beforeDestroy() {
    this.counter.reset();
    this.counter = null;
  },
};
</script>
